<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: content-box;
    }
    a{
        text-decoration: none;
    }
    .filter{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    a{
        text-align: center;
        flex: 1;
    }
    .list{
        width: 100%; 
        display: flex;
    }
    .item{
        flex: 1;
        margin: 10px;
        border: 1px solid red;
    }
    img{
       width: 100px;
       height: 100px;
    }
</style>
<body>
    <!-- 
        页面初始渲染
        1.封装 render  渲染函数
        2.利用数组  map + join  方法渲染页面
        3.后期筛选业务 ，要求 渲染函数增加参数，传递不同的数组
     -->
    <div class="filter">
        <a data-index="1">0-100元</a>
        <a data-index="2">100-300元</a>
        <a data-index="3">300元以上</a>
        <a>全部区间</a>
    </div>
    <div class="list">
    </div>
</body>

</html>
<script>
    const goodsList = [
        {
            id: '4001172',
            name: '杯子',
            price: '289.00',
            picture: 'https://pic1.zhimg.com/v2-6cc0298000328b10f7ab82144974c2bc_r.jpg'
        },
        {
            id: '4001172',
            name: '枕头',
            price: '99.00',
            picture: 'https://pic1.zhimg.com/v2-6cc0298000328b10f7ab82144974c2bc_r.jpg'
        },
        {
            id: '4001172',
            name: '床',
            price: '199.00',
            picture: 'https://pic1.zhimg.com/v2-6cc0298000328b10f7ab82144974c2bc_r.jpg'
        },
        {
            id: '4001172',
            name: '椅子',
            price: '399.00',
            picture: 'https://pic1.zhimg.com/v2-6cc0298000328b10f7ab82144974c2bc_r.jpg'
        },
    ]
    const list = document.querySelector('.list')

    //  封装 render 函数 ，需要定义一个参数，外部传什么数组给我，我就用什么数组渲染
    function render(arr) {
        // list.innerHTML = arr.map(item => {
        //     const { picture, name, price } = item
        //     return `<div class="item">
        //               <img src="${item.picture}" alt="">
        //               <p class="name">${item.name}</p>
        //               <p class="price">${item.price}</p>
        //             </div>`
        // }).join('')
       
        //  对象解构
        // list.innerHTML = arr.map( ({ picture, name, price }) => {
        //     return `<div class="item">
        //               <img src="${picture}" alt="">
        //               <p class="name">${name}</p>
        //               <p class="price">${price}</p>
        //             </div>`
        // }).join('')
        
        // 箭头函数只有一行代码并且返回值就是这行代码的结果  可以省略  {} + return
         list.innerHTML = arr.map( ({ picture, name, price }) => 
                    `<div class="item">
                      <img src='${picture}' alt="">
                      <p class="name">${name}</p>
                      <p class="price">${price}</p>
                    </div>`
        ).join('')
        
    }
    render(goodsList)

    // let newArr = []
    // // 简单筛选 100 元 以下的数据
    // goodsList.forEach(item =>{
    //     if(item.price < 100){
    //         newArr.push(item)
    //        console.log(newArr)
    //     }
    // })

    // // 用 filter 
    // console.log(goodsList.filter( (item ,index) => item.price <100) )

    // 需求2 ： 筛选渲染
    const filter = document.querySelector('.filter')
    filter.addEventListener('click',function(e){
        let {target} = e
        if(target.tagName === 'A'){
            //  点击时 获取自定义属性，来决定用什么条件筛选出数组
            const index = +target.dataset.index

            let arr = []
            if(index === 1){
               arr =  goodsList.filter( (item ,index) => item.price <= 100) 
            }
            else if(index === 2){
                arr =  goodsList.filter( (item ,index) =>  item.price <= 300 && item.price >100) 
            }
             else if(index === 3){
                arr =  goodsList.filter( (item ,index) => item.price > 300) 
            }
            else{
                arr = goodsList
            }
            console.log(arr)
            render(arr)
        }
    })
</script>